<!--
 * @Author: 雷宇航
 * @Date: 2022-05-25 09:20:14
 * @fileName: HfPmProjectProgress.vue
 * @FilePath: hifar-icm-service\src\views\hifar\pm\HfPmProjectProgress.vue
 * @Description: 项目进度甘特图
-->
<template>
  <div id='gantt-wrapper'></div>
</template>

<script>

import { getAction } from '@api/manage'
import { gantt } from 'dhtmlx-gantt'
import moment from 'moment'

export default {
  name: 'HfPmProjectProgress',
  props: {
    selectedKeys: Array,
    default: () => []
  },
  data() {
    return {
      moment,
      url: {
        document: '/pm/pmProject/document'
      }
    }
  },
  mounted() {

  },
  watch: {
    selectedKeys: {
      immediate: true,
      handler(val) {
        if (val.length > 0) {
          this.getById(val.toString())
        }
      }
    }
  },
  methods: {
    getById(projectId) {
      getAction(this.url.document, { projectId }).then(res => {
        if (res.success) {
          this.ganttLoad()
          gantt.init(document.getElementById('gantt-wrapper'))
          let tasks = {
            data: []
          }
          let { subject } = res.result
          subject.forEach(item => {
            tasks.data.push(
              {
                id: item.id,
                text: item.subjectName,
                start_date: item.playStartTime,
                end_date: item.playEndTime,
                status: item.subjectState,
                type: 'subject',
                confirmorTime: item.confirmorTime,
                subjectDes: item.subjectDes,
                createBy: item.createBy
              }
            )
            item.targets.length > 0 && item.targets.forEach(target => {
              tasks.data.push(
                {
                  id: target.id,
                  text: target.targetName,
                  start_date: target.startTime,
                  end_date: target.endTime,
                  parent: target.subjectId,
                  status: item.subjectState,
                  type: 'target',
                  confirmorTime: target.confirmorTime,
                  finishFlag: target.finishFlag,
                  createBy: target.createBy
                }
              )
            })
          })
          gantt.parse(tasks)
        }
      })
    },
    ganttLoad() {
      gantt.clearAll()
      gantt.i18n.setLocale('cn')
      gantt.config.date_format = '%Y-%m-%d %H:%i:%s' //  设置日期格式
      gantt.config.date_scale = '%m-%d'
      gantt.config.readonly = true
      gantt.config.scale_unit = 'day'
      gantt.config.step = 7
      //甘特图自动延长时间刻度以适应所有显示的任务
      gantt.config.fit_tasks = true
      //设置工具提示隐藏之前的时间长度，以毫秒为单位
      gantt.config.tooltip_hide_timeout = 1000
      gantt.config.columns = [
        {
          name: 'text',
          tree: true,
          width: 150,
          align: 'left',
          label: '专题/目标名称',
          resize: true
        },
        { name: 'start_date', align: 'center', label: '开始时间', width: 80, resize: true },
        {
          name: 'end_date',
          align: 'center',
          label: '结束时间',
          width: 80,
          resize: true
        }
      ]
      gantt.templates.task_class = function(start, end, task) {
        switch (task.status) {
          case '0':
            return 'notStart'
            break
          case '1':
            return 'running'
            break
          case '2':
            return 'end'
            break
          case '3':
            return 'postpone'
            break
        }
      }
      gantt.config.drag_timeline = null
      //任务条显示内容
      // gantt.templates.task_text = function (start, end, task) {
      //   return ''
      // }
      //开启悬浮框功能（我也是醉了，还需要先开启一下）
      gantt.plugins({
        tooltip: true
      })
      //悬浮框
      gantt.templates.tooltip_text = function(start, end, task) {
        return (task.type === 'subject' ? '<b>专题名称：</b> ' + task.text + '<br/>' : '<b>目标名称：</b> ' + task.text + '<br/>') +
          '<b>预计开始时间：</b> ' + moment(task.start_date).format('YYYY-MM-DD') + '<br/>' +
          '<b>预计结束时间：</b> ' + moment(task.end_date).format('YYYY-MM-DD') + '<br/>' +
          '<b>实际结束时间：</b> ' + (task.confirmorTime ? task.confirmorTime : '无') + '<br/>' +
          '<b>状态：</b> ' + (task.status === '0' ? '未开始' : task.status === '1' ? '执行中' : task.status === '2' ? '已完成' : '已延期') + '<br/>' +
          '<b>责任人：</b> ' + task.createBy + '<br/>' +
          '<b>完成情况：</b> ' + (task.type === 'subject' ? (task.subjectDes ? task.subjectDes : '无') : (task.finishFlag ? task.finishFlag : '无'))
      }
    }
  }
}
</script>
<style>
@import "~dhtmlx-gantt/codebase/dhtmlxgantt.css";
</style>
<style lang='less' scoped>
#gantt-wrapper {
  width: 100%;
  height: 99%;
  overflow: hidden;
}
</style>
<style>
.gantt_tooltip {
  font-size: 14px;
  box-shadow: 10px 10px 10px rgb(0 0 0 / 10%);
}

.gantt_task_line {
  border-color: rgba(0, 0, 0, 0.25);
}

.gantt_task_line .gantt_task_progress {
  background-color: #000;
}

/* notStart */
.gantt_task_line.notStart {
  background-color: #3688F6;
}

.gantt_task_line.notStart .gantt_task_content {
  color: #fff;
}

/* running */
.gantt_task_line.running {
  background-color: #fa8c16;
}

.gantt_task_line.running .gantt_task_content {
  color: #fff;
}

/* end */
.gantt_task_line.end {
  background-color: #52c41a;
}

.gantt_task_line.end .gantt_task_content {
  color: #fff;
}

/* postpone */
.gantt_task_line.postpone {
  background-color: #f5222d;
}

.gantt_task_line.postpone .gantt_task_content {
  color: #fff;
}
</style>